<template>
	<view class="">
		<u-navbar :is-back="false" title="" >
			<view class="slot-wrap">
				<view class="avatar_con" @click="goMe">
                    <image class="avatar-img" :src="headerImgSrc" mode="aspectFill" @click="goMe"></image>
                </view>
				<u-button class="tab_btn" @click="show = true">
					<text class="location">{{ city }}</text>

					<u-icon class="icon" name="arrow-down-fill" color="#333333" size="16"></u-icon>
				</u-button>
				<view class="search" @click="goSearch">
					<u-icon class="search_icon" name="search" color="#333333" size="32"></u-icon>
					<view class="search_content">请输入搜索内容</view>
				</view>
			</view>
		</u-navbar>

		<view class="container content">
			<!-- 轮播图 -->
			<u-swiper :list="list" :effect3d="true" @click="swiperClick" name="bannerImage"></u-swiper>
			<view class="anime_con">
				<!-- <u-sticky offset-top="100"> -->
					<u-tabs :list="tabList" :is-scroll="false" active-color="#f29100" bar-width="100" :current="tabCurrent" @change="change"></u-tabs>
				<!-- </u-sticky> -->
				<!-- <view class="title">
					<text>推荐漫展</text>
					<text>本地漫展</text>
				</view> -->
				<comiconList :dataList="dataList" v-if="isData"></comiconList>
				<view class="" v-else>换个地区试试？</view>
			</view>
		</view>
		<u-picker mode="region" v-model="show" :default-region="currentCity" :params="params" @confirm="confirm"></u-picker>
		<!-- <u-picker v-model="show" mode="region" :params="params" @confirm="confirm" :area-code="currentCity"></u-picker> -->
		<!-- 底部加载 -->
		<u-loadmore v-if="isData" :status="status" :marginBottom="20" :marginTop="20" @loadmore="loadmore" />
		<!-- 回到顶部组件 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
import comiconList from '@/components/comiconList/comiconList.vue';
export default {
	data() {
		return {
			list: [],
			show: false,
			params: {
				province: true,
				city: true,
				area: false
			},
			// 当前城市选择
			currentCity: ["四川省","成都市"],
			// 向后端传递参数
			city: '成都市',
			// 懒加载相关数据
			dataList: [],
			status: 'loadmore',
			page: 1,
			// 滚动条数据
			scrollTop: 0,
			tabCurrent: 0,
			tabList:[
				{name: '推荐漫展'},
				{name: '本地漫展'},
			],
			isData:true,
            // 获取当前用户头像
            headerImgSrc:"/static/login/single_avatar.png",
			toJSON:''
		};
	},
	components: {
		comiconList
	},
	methods: {
		// tab切换
		change(index) {
			this.tabCurrent = index;
			if (this.tabCurrent === 1) {
				// this.islocal=false
				this.page = 1;
				this.getDataList();
			} else {
				// this.islocal=true
				// 初始化本地数据页码
				this.page = 1;
				this.getDataList();
			}
		},
		// 手动选择加载更多
		loadmore() {
			// 设置加载动画的状态
			this.status = 'loading';
			// this.page = ++this.page;
			// console.log(this.page)
			let url = '';
			let data = {};
			if (this.tabCurrent == 0) {
				url = '/comic-time/getExhibition';
				data = { pageNum: this.page };
			} else {
				url = '/comic-time/originExhibition';
				data = { pageNum: this.page, value: this.city };
			}
			this.$request(url, data, 'GET').then(res => {
				// console.log(res);
				if (res.code == 2000 && res.data) {
					this.dataList.push(...res.data);
					this.status = 'loadmore';
					this.page++;
					// console.log(this.page)
					// console.log(this.page)
				} else {
					this.status = 'nomore';
					return;
				}
			});
		},
		// 轮播图事件
		swiperClick(index) {
			// console.log(this.list)
			uni.navigateTo({
				// 此处传递当前点击商品的id
				url: '/pages/detail/detail?pid=' + this.list[index].bannerExhibition
			});
		},
		// 选择器回调事件
		confirm(e) {
			// console.log(e);
			this.city = e.city.label;
			if (e.city.value == 1101 || e.city.value == 1201 || e.city.value == 3101 || e.city.value == 5001) {
				this.city = e.province.label;
			}
			this.currentCity = [e.province.label, e.city.label];
			// console.log(this.city)
			this.tabCurrent = 1;
			this.isData = true;
			this.page = 1;
			// console.log(this.isData)
			this.getDataList();
		},

		goMe() {
            this.$hasToken()		
			if(this.$hasToken()	){
				uni.switchTab({
					url:"/pages/me/me"
				})
			}
			
		},
        //获取当前用户头像
        getCurrentUserHeadImg(){
            let headerImg=uni.getStorageSync('headerImg');
            if(headerImg){
                this.headerImgSrc=headerImg
                console.log(this.headerImgSrc)
            }else{
                this.headerImgSrc="/static/login/single_avatar.png"
            }
        },
		goSearch() {
			uni.navigateTo({
				url: '/pages/search/search?source=index'
			});
		},
		// 获取当前地址
		getadd() {
			// 绑定ctx为全局this
			const ctx = this;
			// console.log(this)
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: function(res) {
					console.log(res)
					// res为回调参数，包括经纬度，省市区
					ctx.currentCity = [res.address.province, res.address.city];
					
					ctx.city = res.address.city;
				},
				fail(E) {
					console.log(E)
				}
			});
		},
		// 初始请求数据
		getDataList() {
			this.dataList = [];
			let url = '';
			let data = {};
			if (this.tabCurrent == 0) {
				url = '/comic-time/getExhibition';
				data = { pageNum: this.page };
			} else {
				url = '/comic-time/originExhibition';
				data = { pageNum: this.page, value: this.city };
			}
			this.$request(url, data, 'GET').then(res => {
				// console.log(res);
				if (res.code == 2000 && res.data) {
					this.dataList = res.data;
					this.page++;
					this.isData = true;
					// console.log(this.page)
					uni.stopPullDownRefresh();
				} else {
					// console.log("111")
					this.isData = false;
					return;
				}
			});
		}
		// 请求本地数据
	},
	onLoad() {
		// 请求轮播图
		this.$request('/comic-time/RotationChart').then(res => {
			// console.log(res);
			this.list = res.data;
		});
		this.getadd()
		this.getDataList()
        this.getCurrentUserHeadImg()
	},
   onShow(){
        this.getCurrentUserHeadImg()
   },
	// 底部加载
	onReachBottom() {
		this.loadmore();
	},
	// 页面滚动条生命周期
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 下拉刷新生命周期
	onPullDownRefresh() {
		// console.log("1111")
		this.page = 1;
		this.getDataList();
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding-top: 20rpx;
}

// 导航栏样式
.slot-wrap {
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	/* 如果您想让slot内容占满整个导航栏的宽度 */
	flex: 1;
	/* 如果您想让slot内容与导航栏左右有空隙 */
	padding: 0 20rpx;
	// outline: 1px solid red;

	.avatar_con {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		background-color: red;
		overflow: hidden;
		margin: 0 20rpx 0 0;

		.avatar-img {
			width: 100%;
			height: 100%;
		}
	}

	.u-size-default {
		height: 100%;
		font-family: PingFang-SC-Medium;
		font-size: 26rpx;
		line-height: 100%;
		color: #333333;
	}

	.tab_btn {
		display: flex;
		justify-content: space-between;
		// width: 120rpx;
		margin-left: 0;
		border: none;
		padding: 0;
		margin-right: 20rpx;

		.location {
			// width: 90rpx;
			// overflow: hidden;
			// text-overflow: clip;
			//  white-space: nowrap;
			//  text-overflow: ellipsis;
			margin-right: 10rpx;
			// outline: 1px solid red;
            border: none;
		}
	}

	.u-hairline-border:after {
		border: none;
	}

	.search {
		flex-grow: 1;
		height: 58rpx;
		background-color: #e9e9e9;
		border-radius: 29rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		.search_icon {
			margin-right: 10rpx;
		}

		.search_content {
			font-family: PingFang-SC-Regular;
			font-size: 24rpx;
			line-height: 33rpx;
			color: #999999;
		}
	}
}

.title {
	margin-top: 29rpx;
	font-family: PingFang-SC-Bold;
	font-size: 32rpx;
	font-weight: bold;
	line-height: 31rpx;
	color: #000000;
}
</style>
